<template>
  <div class="container_box">
    <Header></Header>
    <!--  -->
    <div class="recommend warpper_box">
      <div class="recommend_box">
        <div class="left">
          <div class="introduce_box" @mouseleave="introduceIndex = -1">
            <div class="list">
              <ul>
                <li
                  class="changeHand"
                  v-for="(item, index) in introduceList"
                  :key="index"
                  @mousemove="hoverIntroduce(index)"
                  :class="introduceIndex == index ? 'active' : ''"
                >
                  <p>{{ item }}</p>
                  <span class="el-icon-arrow-right"></span>
                </li>
              </ul>
            </div>
            <!-- 详情内容 -->
            <div class="info" v-show="introduceIndex != -1">
              <div class="item" v-show="introduceIndex == 0">
                <ul>
                  <li>
                    <p>
                      <span>1</span>北海道
                    </p>在皑皑白雪中泡温泉
                  </li>
                  <li>
                    <p>
                      <span>2</span>冰岛
                    </p>亲近极北之地的莫测极光
                  </li>
                  <li>
                    <p>
                      <span>3</span>澳大利亚
                    </p>在南北半球过个暖洋洋的圣诞
                  </li>
                  <li>
                    <p>
                      <span>4</span>洛杉矶
                    </p>阳光加州,避寒圣地
                  </li>
                  <li>
                    <p>
                      <span>5</span>新加坡
                    </p>活力四射的花园之城
                  </li>
                  <li>
                    <p>
                      <span>6</span>斯里兰卡
                    </p>便利签证，异域风情
                  </li>
                  <li>
                    <p>
                      <span>7</span>帕劳
                    </p>潜水者的朝圣地
                  </li>
                  <li>
                    <p>
                      <span>8</span>缅甸
                    </p>踏上佛国净化之旅
                  </li>
                  <li>
                    <p>
                      <span>9</span>菲律宾
                    </p>徜徉海岛间，潜入深海中
                  </li>
                  <li>
                    <p>
                      <span>10</span>迪拜
                    </p>沙漠中的奇迹之城
                  </li>
                </ul>
              </div>
              <div class="item" v-show="introduceIndex == 1">
                <ul>
                  <li>
                    <p>
                      <span>1</span>漠河
                    </p>至寒圣地的极光约会
                  </li>
                  <li>
                    <p>
                      <span>2</span>黄山
                    </p>银装素裹秒杀菲林季
                  </li>
                  <li>
                    <p>
                      <span>3</span>海螺沟
                    </p>冰川温泉的童话世界
                  </li>
                  <li>
                    <p>
                      <span>4</span>壶口瀑布
                    </p>绝美的冰瀑玉壶奇观
                  </li>
                  <li>
                    <p>
                      <span>5</span>西岭雪山
                    </p>成都周边最大滑雪场
                  </li>
                  <li>
                    <p>
                      <span>6</span>西双版纳
                    </p>聆听欣赏原生态歌舞
                  </li>
                  <li>
                    <p>
                      <span>7</span>霞浦
                    </p>红枫白荻的交相辉映
                  </li>
                  <li>
                    <p>
                      <span>8</span>广州
                    </p>相约一起喝粤式早茶
                  </li>
                  <li>
                    <p>
                      <span>9</span>高雄
                    </p>暖冬初阳遇最美台湾
                  </li>
                  <li>
                    <p>
                      <span>10</span>三亚
                    </p>去热带海滩逃离寒冬
                  </li>
                </ul>
              </div>
              <div class="item" v-show="introduceIndex == 2">
                <ul>
                  <li>
                    <p>
                      <span>1</span>象岛
                    </p>腻了普吉，来象岛玩个深度
                  </li>
                  <li>
                    <p>
                      <span>2</span>巴厘岛
                    </p>巴厘岛免签啦
                  </li>
                  <li>
                    <p>
                      <span>3</span>毛里求斯
                    </p>印度洋上的海上明珠
                  </li>
                  <li>
                    <p>
                      <span>4</span>塞班岛
                    </p>错“季”出行，也有惊喜
                  </li>
                  <li>
                    <p>
                      <span>5</span>长滩岛
                    </p>潜水与蜜月的天堂
                  </li>
                  <li>
                    <p>
                      <span>6</span>圣托里尼
                    </p>蓝白之城映衬着海风吹拂
                  </li>
                  <li>
                    <p>
                      <span>7</span>沙美岛
                    </p>如果你厌倦了芭提雅
                  </li>
                  <li>
                    <p>
                      <span>8</span>杜马盖地
                    </p>找小丑鱼做客去！
                  </li>
                  <li>
                    <p>
                      <span>9</span>兰卡威
                    </p>海钓、潜水，看蓝天
                  </li>
                  <li>
                    <p>
                      <span>10</span>沙巴
                    </p>这里有世界上最美的落日
                  </li>
                </ul>
              </div>
              <div class="item sports" v-show="introduceIndex == 3">
                <div class="items">
                  <b>骑行</b>
                  <div class="box">
                    <p>海南</p>
                    <p>青霞湖</p>
                    <p>敦煌</p>
                    <p>漠河</p>
                    <p>台湾</p>
                    <p>北京</p>
                    <p>杭州</p>
                    <p>双廊</p>
                    <p>婺源</p>
                    <p>阿尔山</p>
                    <p>法国</p>
                    <p>厦门</p>
                    <p>阳朔</p>
                    <p>香格里拉</p>
                    <p>太湖</p>
                    <p>西藏</p>
                    <p>大理</p>
                    <p>成都</p>
                    <p>乌鲁木齐</p>
                  </div>
                </div>
                <div class="items">
                  <b>潜水</b>
                  <div class="box">
                    <p>沙巴</p>
                    <p>三亚</p>
                    <p>斐济</p>
                    <p>巴厘岛</p>
                    <p>长滩岛</p>
                    <p>马尔代夫</p>
                    <p>苏梅岛</p>
                    <p>普吉岛</p>
                    <p>夏威夷</p>
                    <p>巴拉望</p>
                    <p>马来西亚</p>
                    <p>兰卡威</p>
                    <p>埃及</p>
                    <p>印度尼西亚</p>
                    <p>泰国</p>
                  </div>
                </div>
                <div class="items">
                  <b>徒步</b>
                  <div class="box">
                    <p>尼泊尔</p>
                    <p>虎跳峡</p>
                    <p>喀纳斯</p>
                    <p>墨脱</p>
                    <p>小五台</p>
                    <p>贡嘎雪山</p>
                    <p>海陀山</p>
                    <p>海螺沟</p>
                    <p>雨崩</p>
                    <p>三峡</p>
                    <p>阳朔</p>
                    <p>楠溪江</p>
                    <p>梅里雪山</p>
                    <p>野三坡</p>
                    <p>西双版纳</p>
                  </div>
                </div>
                <div class="items">
                  <b>登山</b>
                  <div class="box">
                    <p>珠穆朗玛峰</p>
                    <p>乞力马扎罗</p>
                    <p>牛背山</p>
                    <p>太白山</p>
                    <p>四姑娘山</p>
                    <p>雁荡山</p>
                    <p>云台山</p>
                    <p>三清山</p>
                    <p>普陀山</p>
                    <p>庐山</p>
                    <p>海陀山</p>
                    <p>小五台</p>
                    <p>华山</p>
                    <p>泰山</p>
                    <p>黄山</p>
                    <p>武功山</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 搜索 -->
            <!-- <div class="search_bar">
              <span class="el-icon-search"></span>
              <input type="text" placeholder="请输入想去的地方,如:香港" />
            </div>-->
          </div>
        </div>
        <div class="right">
          <Swiper :swiperData="swiperData" isFade="slide"></Swiper>
        </div>
      </div>
      <div class="tjgl">
        <div class="left">
          <h2>推荐攻略导航</h2>
          <div class="headline">
            <div class="firstbox">
              <img
                src="https://t1-q.mafengwo.net/s10/M00/DB/BB/wKgBZ1k2ahqAau5wAApXVKSVFV426.jpeg?imageMogr2%2Fthumbnail%2F%21130x184r%2Fgravity%2FCenter%2Fcrop%2F%21130x184%2Fquality%2F90"
                alt
              />
            </div>
            <p>
              2
              <span>南京</span>
            </p>
            <p>
              3
              <span>广州</span>
            </p>
            <p>
              4
              <span>大理</span>
            </p>
            <p>
              5
              <span>海口</span>
            </p>
            <p>
              6
              <span>涠洲岛</span>
            </p>
            <p>
              7
              <span>丽江</span>
            </p>
            <p>
              8
              <span>上海</span>
            </p>
            <p>
              9
              <span>成都</span>
            </p>
            <p>
              10
              <span>苏州</span>
            </p>
          </div>
        </div>
        <div class="right">
          <h2 class="title">推荐攻略</h2>
          <!-- 类型数据type,1 -->
          <div class="item_list _item1" v-for="
          (item) in StrategyList" :key="item.id">
            <div class="from_box">
              <div class="l">
                来自
                <span>匿名用户</span>
              </div>
              <div class="r">
                <img
                  @click="handleLike"
                  src="../static/home/like.png"
                  style="width:20px;height:20px"
                />
                <span @click="handleStar" class="el-icon-star-off"></span>
              </div>
            </div>
            <div class="article_title">{{item.title}}</div>
            <div class="article_main">
              <div class="left">
                <img src alt />
              </div>
              <div class="right">
                <div class="main_body">
                  <span v-html="item.context"></span>
                </div>
                <div class="giveLike">
                  <p>
                    发布时间
                    {{item.createTime}}
                    <!-- <span>14678浏览</span>
                    <span>42评论</span>-->
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 类型数据type,2 -->
          <!-- <div class="item_list _item2">
            <div class="from_box">
              <div class="l">
                来着
                <span>自由行攻略</span>
              </div>
              <div class="r">
                <span>0</span>蜂蜂体验过
                <span>
                  <img src alt />
                </span>
              </div>
            </div>

            <div class="articleTitle">珠海御温泉| 最强趣玩攻略</div>
            <div class="article_main">珠海御温泉,日武风格温泉度假村,吸引无数人前来打卡,特别是不得不试的大餐庙会,体验感很棒,奉上游玩攻略</div>
            <div class="article_img">
              <img
                v-for="item in 3"
                :key="item"
                src="https://t1-q.mafengwo.net/s18/M00/88/A1/CoUBYGA_t4KARLmRACMGxVnkFoU97.jpeg?imageMogr2%2Fthumbnail%2F%21220x130r%2Fgravity%2FCenter%2Fcrop%2F%21220x130%2Fquality%2F100"
                alt
              />
            </div>
            <div class="reader">13770浏览</div>
          </div>-->
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { get } from "@/plugins/api";
export default {
  props: {},
  components: {},
  data() {
    return {
      // 轮播图数据
      swiperData: [
        {
          imgUrl:
            "https://n1-q.mafengwo.net/s11/M00/3D/3F/wKgBEFtrlBWAUHczAAR1Jh3BMT410.jpeg"
        },
        {
          imgUrl:
            "https://b1-q.mafengwo.net/s12/M00/1F/F1/wKgED1uHx-2AVONCAASTAwl30cw73.jpeg"
        },
        
        {
          imgUrl:
            "https://b1-q.mafengwo.net/s11/M00/E1/BE/wKgBEFsYhsCAUh5KAAXn20e3Ig4130.png"
        },
        {
          imgUrl:
            "https://n1-q.mafengwo.net/s13/M00/03/30/wKgEaVyu94SAIqDcAAheevdYPB4887.png"
        }
      ],
      //
      introduceList: [
        "海外冬季目的地精选",
        "国内冬季目的地精选",
        "奔向海岛",
        "主题推荐"
      ],
      introduceIndex: -1,
      StrategyList: []
    };
  },
  methods: {
    // 经过
    hoverIntroduce(index) {
      this.introduceIndex = index;
    },
    // 获取攻略列表
    getStrategyList() {
      get("/strategy/get_strategy_list", { address: 2 }).then(res => {
        // console.log(res);
        this.StrategyList = res.data;
      });
    },
    handleLike() {
      this.$message.success("点赞成功");
    },
    handleStar() {
      this.$message.success("收藏成功");
    }
  },
  mounted() {
    this.getStrategyList();
  },
  watch: {},
  computed: {},
  filters: {}
};
</script>
<style lang="scss" scoped>
.recommend {
  background-color: #ffff;
  padding: 10px 30px;
  .recommend_box {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;

    .left {
      .introduce_box {
        position: relative;
        // width: 100%;
        .list {
          position: relative;
          z-index: 10;
          ul {
            width: 240px;
            li {
              border: 1px solid #ddd;
              border-bottom: none;
              height: 60px;
              color: #666;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 10px;
              &:last-child {
                border-bottom: 1px solid #ddd;
              }
              &.active {
                border-right: none;
              }
              span {
                font-size: 20px;
              }
            }
          }
        }
        .info {
          // border: 1px solid #ddd;
          width: 300px;
          position: absolute;
          left: 239px;
          top: 0;
          z-index: 1;
          background-color: #fafafa;
          box-shadow: 10px 30px 30px #ccc;

          ul {
            li {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #999;
              height: 40px;

              p {
                font-size: 14px;
                padding: 0 10px;
                cursor: pointer;

                span {
                  padding-right: 10px;
                  font-size: 18px;
                  font-weight: 900;
                  font-style: oblique;
                }
              }
              &:nth-child(-n + 3) p {
                color: #ffa800;
              }
            }
          }
          .item.sports {
            padding: 20px 70px 20px 20px;
            width: 490px;
            background-color: #fafafa;
            .items {
              display: flex;
              margin-top: 15px;
              .box {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                p {
                  margin-left: 20px;
                  margin-bottom: 10px;
                  color: #666;
                  font-size: 12px;
                  cursor: pointer;
                  &:hover {
                    color: #ff9d00;
                  }
                }
              }

              b {
                display: block;
                width: 180px;
              }
            }
          }
        }
        .search_bar {
          background-color: #fff;
          border: 2px solid #ffa800;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 40px;
          margin: 10px 0;
          padding-left: 10px;
          span {
            width: 20px;
            height: 20px;
            text-align: center;
            color: #ffb845;
            font-size: 20px;
            font-weight: 900;
          }
          input {
            flex: 1;
            border: none;
            padding-left: 10px;
            font-size: 12px;
            outline: none;
          }
        }
      }
    }
    .right {
      width: 700px;
      height: 340px;
    }
  }
  .tjgl {
    display: flex;
    justify-content: space-between;

    .left {
      width: 315px;
      padding-right: 140px;

      h2 {
        font-weight: 400;
        font-size: 24px;
        border-bottom: 1px solid #ddd;
      }
      .headline {
        margin-top: 20px;
        .firstbox {
          width: 130px;
          height: 184px;

          img {
            height: 100%;
          }
        }
        p {
          color: #ff9d00;
          font-size: 26px;
          font-weight: 700;
          padding: 30px 0;
          border-bottom: 1px solid #ddd;

          span {
            color: #333;
            font-size: 18px;
            margin-right: 15px;
            font-weight: 400;
            cursor: pointer;
            margin-left: 20px;
            &:hover {
              color: #37bcfb;
            }
          }
          &:last-child {
            border: none;
          }
        }
      }
    }
    .right {
      flex: 1;
      h2.title {
        font-weight: 400;
        font-size: 30px;
        border-bottom: 1px solid #ddd;
      }
      .item_list {
        border-bottom: 1px solid #ddd;
        padding: 20px 0 60px;
        &._item1 {
          .from_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .l {
              color: #333;
              span {
                color: #ff9d00;
              }
            }
            .r {
              padding: 4px 6px;
              border: 1px solid #ffa800;
              border-radius: 20px;
              color: #333;
              display: flex;
              align-items: center;
              span {
                font-size: 20px;
                color: #ff9d00;
                margin: 0 8px;
              }
            }
          }
          .article_title {
            font-size: 24px;
          }
          .article_main {
            display: flex;
            justify-content: space-between;
            height: 226px;
            overflow: hidden;
            .left {
              margin-right: 20px;
              width: 200px;
              img {
                width: 100%;
              }
            }
            .right {
              height: 226px;
              overflow: hidden;
              flex: 1;
              // .main_body {
              // }
              .giveLike {
                text-align: right;
                font-size: 12px;
                p {
                  color: #ff9d00;
                  span {
                    color: #ccc;
                    margin: 0 10px;
                  }
                }
              }
            }
          }
        }
        &._item2 {
          .from_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
              color: #ffa800;
              font-size: 12px;
              margin: 0 10px;
            }
          }
          .articleTitle {
            font-size: 24px;
          }
          .article_main {
            margin: 10px 0;
          }
          .article_img {
            height: 150px;
            // margin: 10px 0;
            img {
              flex: 1;
              height: 70%;
              margin-right: 20px;
            }
          }
          .reader {
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>
